<template>
  <div :style="backgroundSetting" class="app-container-body">
    <div v-if="undefined !== menu && null !== menu" class="content-body">
      <div v-for="item in columns" :key="item.id" class="column-li">
        <component-mobile-template
          :temp="item"
          @fetch-data="callBack"
          @fetch-entity="callBackEntity"
        />
      </div>
    </div>
    <div v-else>Loading...</div>
  </div>
</template>
<script>
import ComponentMobileTemplate from '@/template'
import { requestGet } from '@/api/system/common'
export default {
  name: 'MobileContent',
  components: { ComponentMobileTemplate },
  data() {
    return {
      columns: null,
      menu: null,
      image: '', // 背景图片
      color: '#ffffff' // 背景颜色
    }
  },
  computed: {
    backgroundSetting() {
      if (this.image) {
        return {
          '--bak-image': 'url( ' + process.env.VUE_APP_BASE_API.substring(
            0,
            process.env.VUE_APP_BASE_API.length - 1
          ) + this.image + ') ',
          '--bak-color': this.color === '' ? '#ffffff' : this.color
        }
      } else {
        return {
          '--bak-color': this.color === '' ? '#ffffff' : this.color
        }
      }
    }
  },
  methods: {
    openMenu(menu) {
      this.image = ''
      this.color = ''
      this.menu = menu
      this.initMenu()
      this.initColumn()
    },
    initMenu() {
      requestGet('rest/api/mobile/v1/menu/manager/one', { id: this.menu })
        .then(res => {
          const { data } = res
          this.image = data.bakImage
          this.color = data.bakColor
        }).catch(() => {
          this.image = ''
          this.color = '#ffffff'
        })
    },
    callBack(data) {
      this.$emit('parent-more', data)
    },
    callBackEntity(data) {
      this.$emit('parent-entity', data)
    },
    initColumn() {
      if (this.menu !== undefined && this.menu !== null) {
        requestGet('rest/api/mobile/v1/column/manager', { mid: this.menu })
          .then(res => {
            const { data } = res
            if (data !== null) {
              this.columns = data.data
            }
            this.$emit('fact-closeLoading')
          })
          .catch(() => {
            this.columns = []
            this.$emit('fact-closeLoading')
          })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container-body {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.content-body {
  position: relative;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--bak-image) no-repeat;
  background-size: contain;
  background-color: var(--bak-color);
}
.column-li {
  width: 100%;
  height: auto;
}
</style>
